<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>雲</title>
    <link rel="stylesheet" href="css/hui.css"/>
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link rel="stylesheet" href="css/homepage.css">

</head>

<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable mui-draggable">
    <!--侧边栏部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-left">
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="content">

                    <ul class="mui-table-view t-view">
                        <li class="mui-table-view-cell mui-media">
                            <a href="javascript:;">
                                <img class="mui-media-object mui-pull-left" src="images/timg (3).jpg">
                                <div class="mui-media-body m-body">
                                    诸葛莽夫
                                </div>

                            </a>
                            <p class='mui-ellipsis'>能和王司徒一起吵架，是件幸福的事情；可是，打呼噜怎么办？</p>
                        </li>
                </div>
                <ul class="mui-table-view mui-table-view-chevron ">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            我的消息
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            我的收藏
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            我的足迹
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            我的关注
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-hidden">
                        <a class="mui-navigate-right">
                            我的足迹
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            二维码
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            工具栏
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" id='feedback'>
                            反馈
                        </a>
                    </li>
                </ul>
                <button type="button" class="mui-btn mui-btn-red mui-btn-block mui-hidden">注销</button>
                <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id='login'>登录</button>
            </div>
        </div>
    </aside>
    <div class="mui-inner-wrap ">
        <div class="wrap p-wrap">
            <!--顶部-->
            <header class="header mui-bar mui-bar-nav ">
                <!--顶部通用栏-->
                <div class="currency ">
                    <div class="currency-back">

                        <a class="mui-action-back mui-icon mui-icon-back mui-pull-left back"></a>
                        <div class="mui-title titleCenter">雲滇</div>
                        <a class="mui-icon mui-action-menu mui-icon-search mui-pull-right"></a>
                    </div>
                </div>
            </header>
            <!--banner-->

            <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper wrpa-w">
                <div class="mui-scroll">
                    <div class="" id="move-togger">
                        <div class="banner">
                            <ul class="clearfix">
                                <li>
                                    <a href="#"><img src="images/l8.jpg" alt=""/></a>
                                </li>
                                <li>
                                    <a href="#"><img src="images/l1.jpg" alt=""/></a>
                                </li>
                                <li>
                                    <a href="#"><img src="images/l2.jpg" alt=""/></a>
                                </li>
                                <li>
                                    <a href="#"><img src="images/l3.jpg" alt=""/></a>
                                </li>
                                <li>
                                    <a href="#"><img src="images/l4.jpg" alt=""/></a>
                                </li>
                                <li>
                                    <a href="#"><img src="images/l5.jpg" alt=""/></a>
                                </li>
                                <li>
                                    <a href="#"><img src="images/l6.jpg" alt=""/></a>
                                </li>
                                <li>
                                    <a href="#"><img src="images/l7.jpg" alt=""/></a>
                                </li>
                                <li>
                                    <a href="#"><img src="images/l8.jpg" alt=""/></a>
                                </li>
                                <li>
                                    <a href="#"><img src="images/l1.jpg" alt=""/></a>
                                </li>
                            </ul>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>

                        <!--测试滑动 所有内容从这里开始写-->

                        <!--===========tab切换栏内容区域=============-->
                        <div class="mui-content" style='margin-bottom: 60px;'>
                            <div style="padding: 10px 10px;">
                                <div id="segmentedControl" class="mui-segmented-control">
                                    <a class="mui-control-item mui-active" href="#item1">
                                        	古镇
                                    </a>
                                    <a class="mui-control-item" href="#item2">
                                        	山水
                                    </a>
                                    <a class="mui-control-item" href="#item3">
                                        	随便逛逛
                                    </a>
                                    
                                </div>
                            </div>
                            <div>
                                <div id="item1" class="mui-control-content mui-active">
     
                                    
                                    <div class="mui-card">
                                        <div class="mui-card-header">大理云龙县诺邓村</div>
                                        <div class="mui-card-header mui-card-media"
                                             style="height:40vw;background-image:url(http://c3-q.mafengwo.net/s2/M00/1E/15/wKgBpU5xvWLK6IxEAAFlW_wNwz458.jpeg)"></div>
                                        <div class="mui-card-content">

                                            <div class="mui-card-content-inner">
                                                <p>Posted on January 18, 2016</p>
                                                <p style="color: #333; height: 40px; overflow: hidden;">
                                                    世上真有什么地方能抵御岁月变迁，时光侵袭么?地处滇西北大山深处，那座名叫“诺邓”的白族村庄，就在滔滔的历史洪流中保存了千年不变的面貌。她位于云南省大理白族自治州云龙县城西北面的山谷中。由于自唐代南诏时期开始，1000多年以来“诺邓”这个村名一直没有改变，因此她被称为“千年白族村”。</p>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="mui-card">
                                        <div class="mui-card-header">大理云龙县诺邓村</div>
                                        <div class="mui-card-header mui-card-media"
                                             style="height:40vw;background-image:url(http://c3-q.mafengwo.net/s2/M00/1E/15/wKgBpU5xvWLK6IxEAAFlW_wNwz458.jpeg)"></div>
                                        <div class="mui-card-content">

                                            <div class="mui-card-content-inner">
                                                <p>Posted on January 18, 2016</p>
                                                <p style="color: #333; height: 40px; overflow: hidden;">
                                                    世上真有什么地方能抵御岁月变迁，时光侵袭么?地处滇西北大山深处，那座名叫“诺邓”的白族村庄，就在滔滔的历史洪流中保存了千年不变的面貌。她位于云南省大理白族自治州云龙县城西北面的山谷中。由于自唐代南诏时期开始，1000多年以来“诺邓”这个村名一直没有改变，因此她被称为“千年白族村”。</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div id="item2" class="mui-control-content">
                                    <div class="mui-card">
                                        <div class="mui-card-header">大理云龙县诺邓村</div>
                                        <div class="mui-card-header mui-card-media"
                                             style="height:40vw;background-image:url(http://c3-q.mafengwo.net/s2/M00/1E/15/wKgBpU5xvWLK6IxEAAFlW_wNwz458.jpeg)"></div>
                                        <div class="mui-card-content">

                                            <div class="mui-card-content-inner">
                                                <p>Posted on January 18, 2016</p>
                                                <p style="color: #333; height: 40px; overflow: hidden;">
                                                    世上真有什么地方能抵御岁月变迁，时光侵袭么?地处滇西北大山深处，那座名叫“诺邓”的白族村庄，就在滔滔的历史洪流中保存了千年不变的面貌。她位于云南省大理白族自治州云龙县城西北面的山谷中。由于自唐代南诏时期开始，1000多年以来“诺邓”这个村名一直没有改变，因此她被称为“千年白族村”。</p>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div id="item3" class="mui-control-content">
                                    <div class="HUI_Wrap">
                                        <div class="HUI_Waterfall" id="HUI_Waterfall"></div>
                                    </div>
                                </div>
                               
                            </div>
                            <!--===========tab切换栏内容区域=============-->
                        </div>
                    </div>
                </div>
            </div>
            <!--底部导航  -->
            <div class="footer-nav">
                <ul class='clearfix'>
                    <li class="show five ">
                        <a id='homepage'><i class='show iconfont icon-all'></i>发现美</a>
                    </li>
                    <li class="five">
                        <a id='collext'><i class='iconfont icon-bangzhu'></i>小助手</a>
                    </li>
                    <li class=" five">
                        <a id='discuss'><i class='iconfont icon-edit'></i>同游圈</a>
                    </li>
                    <li class=" five">
                        <a id='toolbar'><i class='iconfont icon-favorite'></i>收藏夹</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
    <script src="js/hui.js"></script>
    <script src="js/huiWaterfall.js"></script>
    <script src="js/mui.js"></script>
    <script src="js/common.js"></script>
    <script src="js/homepage.js"></script>

<script type="text/javascript">
    //第一步 初始化瀑布流dom布局
    var Waterfall = new huiWaterfall('#HUI_Waterfall');

    //str 就是模拟服务器返回的瀑布流选项内容 模拟了10个项目，为了ui效果后端输出时保持每页偶数个项目（最后一页除外）
    var str = 
    	'<div class="HUI_WaterFallItems">' +
        '	<a herf="hui.toast(\'test\');">' +
        '		<div class="HUI_WaterFallItemImg"><img src="images/l1.jpg" /></div>' +
        '		<div class="HUI_WaterFallItemText">古镇</div>' +
        '	</a>' +
        '</div>' +
        '<div class="HUI_WaterFallItems">' +
        '	<a herf="hui.toast(\'test\');">' +
        '		<div class="HUI_WaterFallItemImg"><img src="images/l2.jpg" /></div>' +
        '		<div class="HUI_WaterFallItemText">红土地</div>' +
        '	</a>' +
        '</div>' +
        '<div class="HUI_WaterFallItems">' +
        '	<a herf="hui.toast(\'test\');">' +
        '		<div class="HUI_WaterFallItemImg"><img src="images/l3.jpg" /></div>' +
        '		<div class="HUI_WaterFallItemText">古镇</div>' +
        '	</a>' +
        '</div>' +
        '<div class="HUI_WaterFallrItems">' +
        '	<a herf="hui.toast(\'test\');">' +
        '		<div class="HUI_WaterFallItemImg"><img src="images/l4.jpg" /></div>' +
        '		<div class="HUI_WaterFallItemText">山水</div>' +
        '	</a>' +
        '</div>' +
        '<div class="HUI_WaterFallItems">' +
        '	<a herf="hui.toast(\'test\');">' +
        '		<div class="HUI_WaterFallItemImg"><img src="http://img.hb.aicdn.com/daf05bb29b950dfe88522b2a26edbf79c7ffa3a3fe8d-5tqRPo_fw658" /></div>' +
        '		<div class="HUI_WaterFallItemText">美景</div>' +
        '	</a>' +
        '</div>' +
        '<div class="HUI_WaterFallItems">' +
        '	<a herf="hui.toast(\'test\');">' +
        '		<div class="HUI_WaterFallItemImg"><img src="images/l6.jpg" /></div>' +
        '		<div class="HUI_WaterFallItemText">山水</div>' +
        '	</a>' +
        '</div>'+
        '<div class="HUI_WaterFallItems">' +
        '	<a herf="hui.toast(\'test\');">' +
        '		<div class="HUI_WaterFallItemImg"><img src="images/l1.jpg" /></div>' +
        '		<div class="HUI_WaterFallItemText">古镇</div>' +
        '	</a>' +
        '</div>' +
        '<div class="HUI_WaterFallItems">' +
        '	<a herf="hui.toast(\'test\');">' +
        '		<div class="HUI_WaterFallItemImg"><img src="images/l2.jpg" /></div>' +
        '		<div class="HUI_WaterFallItemText">红土地</div>' +
        '	</a>' +
        '</div>' +
        '<div class="HUI_WaterFallItems">' +
        '	<a herf="hui.toast(\'test\');">' +
        '		<div class="HUI_WaterFallItemImg"><img src="images/l3.jpg" /></div>' +
        '		<div class="HUI_WaterFallItemText">古镇</div>' +
        '	</a>' +
        '</div>' +
        '<div class="HUI_WaterFallrItems">' +
        '	<a herf="hui.toast(\'test\');">' +
        '		<div class="HUI_WaterFallItemImg"><img src="images/l4.jpg" /></div>' +
        '		<div class="HUI_WaterFallItemText">山水</div>' +
        '	</a>' +
        '</div>' +
        '<div class="HUI_WaterFallItems">' +
        '	<a herf="hui.toast(\'test\');">' +
        '		<div class="HUI_WaterFallItemImg"><img src="http://img.hb.aicdn.com/daf05bb29b950dfe88522b2a26edbf79c7ffa3a3fe8d-5tqRPo_fw658" /></div>' +
        '		<div class="HUI_WaterFallItemText">美景</div>' +
        '	</a>' +
        '</div>' +

        '<div class="HUI_WaterFallItems">' +
        '	<a herf="hui.toast(\'test\');">' +
        '		<div class="HUI_WaterFallItemImg"><img src="images/l6.jpg" /></div>' +
        '		<div class="HUI_WaterFallItemText">山水</div>' +
        '	</a>' +
        '</div>';
    //使用addItems()函数增加项目即可 如果是ajax远程加载 ajax获取数据完成后执行即可
    //addItems() 的参数是瀑布流项目的html
    Waterfall.addItems(str);
</script>

</html>